<template>
	<view class="container">
		<!-- 开始内容区域 -->
		<view v-for="item in itemList" :key='item.id'>
			<view class="exam">
				<view class="exam-types">
					<text v-if="item.type_id == 0">单选题</text>
					<text v-else-if="item.type_id == 1">多选题</text>
					<text v-else>判断题</text>
					<text>{{idx}}</text>
					<text>/</text>
					<text>{{ questions.length }}</text>
				</view>

				<view class="exam-context">
					<text>{{ item.title}}</text>
				</view>
				<!-- 单选和判断 -->
				<radio-group class="exam-radio" v-if="item.type_id == 0 || item.type_id == 2" name='answers'
					@change="(e) => radioChange(e, item.id,item.type_id)">
					<label v-for="(item1,index) in item.options" :key='index'>
						<radio :value="index +':'+ item1" :checked="item.answer1==item1?true:false" />
						<text>{{ options[index] }}.{{item1}}</text>
					</label>
				</radio-group>

				<!-- 多选 -->
				<checkbox-group v-else-if="item.type_id == 1" @change="(e) => checkChange(e, item.id,item.type_id)">
					<label class="checkboxItem" v-for="(item2,index2) in item.options" :key='index2'>
						<checkbox :value="index2 +':'+ item2.answer"
							:checked="(item.answer1.indexOf(item2.answer) > -1) ?true:false" />
						<text>{{ options[index2]}}.{{item2.answer}}</text>
					</label>
				</checkbox-group>


				<button type="default" @click='checkboxVerification' v-if="item.type_id == 1"
					style="width: 50%;margin: 50upx auto;">确定</button>



			</view>

			<!-- 单选解析 -->
			<view class="analysis" v-if="verificationRes">

				<view class="right">
					<view>正确答案:
							<label>
								<text>{{ verificationRes.true_answer }}</text>
							</label>
					</view>
					<view>你的答案:
						<label>
							<text>{{ options[answer[0]] }}</text>
						</label>
					</view>
					<text style="color: green;" v-if="verificationRes.result == 'T'">（正确）</text> 
					 <text style="color: red;" v-else>（错误）</text>
				</view>

				<view class="details">
					<view class="tt">
						<text>解析：</text>
					</view>
					<view class="con" v-html="verificationRes.analysis">
					</view>
				</view>
			</view>

			<!-- 多选解析 -->
			<view class="analysis" v-if="verificationCheckbox">
				<view class="right">
					<view>正确答案: 
						<view class="correct" style="color: #00aa00; font-weight: 500;">
							<label>
								<text>{{ verificationCheckbox.true_answer }}</text>
							</label>
						</view>
					</view>
					<view>你的答案:<view class="correct" >
						<label>
							<text>{{ options[answer[0]] }}</text>
						</label>
					</view>
					<text style="color: green;" v-if="verificationCheckbox.result == 'T'">（正确）</text> 
					 <text style="color: red;" v-else>（错误）</text>
					</view>
				</view>

				<view class="details">
					<view class="tt">
						<text>解析：</text>
					</view>
					<view class="con">
						{{verificationCheckbox.analysis}}
					</view>


				</view>
			</view>
			<view class="biji">
				<view class="title">
					写笔记
				</view>
				<textarea v-model="bijitext" placeholder="请写入笔记内容" />
				<view class="btn">
					<button type="primary" @click="biaoji">写笔记</button>
					<button type="warn" @click="shoucang">收藏此题</button>
				</view>
			</view>
			<!-- 遮罩层 -->
			<view class="mask" v-show='mask' @click='hideMask'></view>


			<!-- 考试底部 -->
			<view class="floor">

				<view class="floor-top">
					<view class="floor-top-left" @click="prevTi(item.id)">
						<image src="../static/prevPage.png" mode="aspectFit"></image>
					</view>
					<view class="floor-top-center">
						<!-- <p style='color: #ff0000;'>{{minute}}:{{second}}</p> -->
					</view>
					<view class="floor-top-right" @click="nextTi(item.id)">
						<image src="../static/nextPage.png" mode="aspectFit"></image>
					</view>
				</view>



				<view class="floor-bottom">

					<view class="floor-bottom-left" @click="prevTi(item.id)">上一题</view>
					<view class="floor-bottom-center" @click="picker">全部</view>
					<view class="floor-bottom-right" @click="nextTi(item.id)">下一题</view>
				</view>


				<scroll-view scroll-y="true" class="beall" v-show="beall" style="height: 600upx;">
					<view class="item" v-for="(item3,index3) in questions" :key='index3' @click="goOneQuestion(index3)">
						<text style="margin-right: 20upx;">{{ index3+1 }}.</text> <text>{{ item3.title }}</text>
					</view>
				</scroll-view>



			</view>
		</view>




	</view>
</template>

<script>
	import {checkUserinfo} from '@/request/checkUserinfo';
	export default {
		data() {
			return {
				options: ['A', 'B', 'C', 'D'],
				id: '', //试卷ID
				class_id: 1,
				exam_id: '',
				uid: '',
				duration: 240,
				questions: [], //本套题数组
				itemList: [], //一道题
				firstQ_id: '', //首题ID
				secondQ_id: '',
				type_id: 0,
				idx: 1,
				radioVal: '',
				checkedId: 0,
				answers: [], //答案新数组
				checkedAnswer: '',
				aw: {},
				exam_id: 0,
				submitState: false,
				newArr: [],
				beall: false, //弹出层
				mask: false, //遮罩
				answer: [], //单选答案数组
				answerCheck: [], //多选答案数组
				chooseRadItemID: '', //当前单选题的id
				chooseboxItemID: '', //当前多选题的id
				verificationRes: '', //单选和判断的验证结果
				verificationCheckbox: '' ,//多选的验证结果
				bijitext:'',
				shiti_id:0, //当前题目id
			};
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if (userinfo.uid == '' || !userinfo.uid) {
				uni.navigateTo({
					url: '../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			} else {
				if (res.from === 'button') {

				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad(e) {
			checkUserinfo()
			let userinfo = uni.getStorageSync('userinfo');
			if(userinfo){
				this.uid = userinfo.uid;
			}
			console.log(e)
			if(e.item){
				let item = JSON.parse(e.item)
				this.id = item.shijuan_id
				this.class_id =item.class_id
				this.exam_id = item.exam_id
				this.getexamItem()
			}
			if(e.type){
				uni.setNavigationBarTitle({
					title:'我的笔记、收藏列表'
				})
				this.getTi(e.type)
			}
		},
		onShow() {
			
		},
		methods: {
			biaoji(){
				if(this.bijitext == ''){
					uni.showToast({
						title:'请填写笔记内容',
						icon:'error'
					})
					return false;
				}
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/exam1/biaoji',
					data: {
						uid: this.uid!=''?this.uid:0,
						shiti_id: this.shiti_id,
						biji: this.bijitext,
						is_bj:1
					},
					method: 'POST',
					success: (res) => {
						console.log('标记结果', res.data)
						uni.showToast({
							title:'标记成功'
						})
					},
					fail: (res) => {
						console.log(res.data);
					}
				});
			},
			shoucang(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/exam1/biaoji',
					data: {
						uid: this.uid!=''?this.uid:0,
						shiti_id: this.shiti_id,
						is_sc:1
					},
					method: 'POST',
					success: (res) => {
						console.log('收藏结果', res.data)
						uni.showToast({
							title:'收藏成功'
						})
					},
					fail: (res) => {
						console.log(res.data);
					}
				});
			},
			// 单选答案验证
			RadioVerification() {
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/exam1/getAnswer',
					data: {
						uid: this.uid!=''?this.uid:0,
						question_id: this.chooseRadItemID,
						answer: this.answer
					},
					method: 'POST',
					success: (res) => {
						console.log('验证结果', res)
						this.verificationRes = res.data.data
						// this.nextTi()
					},
					fail: (res) => {
						console.log(res.data);
					}
				});
			},

			// 多选答案验证
			checkboxVerification() {
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/exam1/getAnswer',
					data: {
						uid: this.uid!=''?this.uid:0,
						question_id: this.chooseboxItemID,
						answer: this.answerCheck
					},
					method: 'POST',
					success: (res) => {
						console.log('验证结果', res.data.data)

						this.verificationCheckbox = res.data.data
					},
					fail: (res) => {
						console.log(res.data);
					}
				});
			},

			getexamItem() {
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/exam1/getShiJuanDetail',
					data: {
						id: this.id
					},
					method: 'POST',
					success: (res) => {
						console.log(res)
						this.questions = res.data.data.questions

						this.questions.forEach((val, index, arr) => {
							val.answer = []
							val.answer1 = []
						})
						uni.setStorageSync(this.id + '_exam', this.questions)
						this.questions = uni.getStorageSync(this.id + '_exam')
						console.log('本套题', this.questions)
						this.itemList = [this.questions[0]]
						console.log('第一道题', this.itemList)
						this.firstQ_id = this.questions[0].id
						this.shiti_id = this.questions[0].id
						this.secondQ_id = this.questions[1].id
					},
					fail: (res) => {
						console.log(res.data);
					}
				});
			},

			// 下一题
			nextTi(id) {
				this.shiti_id = id
				this.verificationRes = '',
					this.verificationCheckbox = ''
				let qid = id ? id : this.idx
				if (this.idx >= this.questions.length) {
					console.log('没有了')
					return false
				} else {
					let obj = {
						...this.aw
					}
					console.log('下一题', this.idx)
					this.itemList = this.questions.slice(this.idx, this.idx + 1)
					this.idx++
				}

			},

			// 上一题
			prevTi(id) {
				this.shiti_id = id
				let qid = id ? id : this.idx
				if (this.idx >= 1) {
					this.submitState = false

					console.log('上一题', this.idx)
					this.itemList = this.questions.slice(this.idx - 1, this.idx)
					this.idx--
				} else {
					console.log('没有了')
					return false
				}
			},
			checkChange(e, id, type_id) {
				console.log('题目id', id)
				console.log('多选答案', id, type_id, e.detail.value)
				// 获取本题的id
				this.chooseboxItemID = id
				this.questions.forEach((val, index, arr) => {
					if (type_id == 1) {
						if (val.id == id) {
							val.answer = []
							val.answer1 = []
							e.detail.value.forEach((v, i) => {
								console.log('每一项输出', v)
								var answer_arr = v.split(':')
								val.answer1.push(answer_arr[1])
								// console.log(answer_arr[0])
								val.answer.push({
									key: answer_arr[0],
									answer: answer_arr[1]
								})

								this.answerCheck.push(answer_arr[0])

							})
						}
					}
				})

				uni.setStorageSync(this.id + '_exam', this.questions)
				this.questions = uni.getStorageSync(this.id + '_exam')
				console.log('当前已保存题目带答案', this.questions)
			},
			radioChange(evt, id, type_id) {
				this.radioVal = evt.detail.value
				console.log(id, type_id, evt.detail.value)
				// 获取选中项的索引
				let chooseArr = evt.detail.value.split(':')
				let chooseRes = Number(chooseArr[0])
				this.answer = [chooseRes]
				console.log(this.answer)

				// 获取本题的id
				this.chooseRadItemID = id

				this.checkedId = id
				this.aw.id = id
				this.aw.type_id = type_id
				this.aw.value = evt.detail.value
				console.log(this.aw)

				// 单选和判断题把选中的选项赋值给answer
				this.questions.forEach((val, index, arr) => {
					if (val.id == id) {
						var answer_arr = evt.detail.value.split(':')
						val.answer1 = answer_arr[1]
						val.answer = answer_arr[0]
					}
				})

				uni.setStorageSync(this.id + '_exam', this.questions)
				this.questions = uni.getStorageSync(this.id + '_exam')
				console.log('当前已保存题目带答案', this.questions)

				this.RadioVerification()
			},


			// 弹出层
			picker() {
				this.mask = !this.mask
				this.beall = !this.beall
			},
			hideMask() {
				this.mask = false
				this.beall = false
			},
			goOneQuestion(index) {
				console.log(index)
				this.idx = index
				let list1 = this.questions.filter((value, index) => {
					return value;
				});
				console.log(list1[index]);
				this.itemList = [list1[index]]
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100vh;
		background-color: #fff;
	}
	.biji{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		margin-bottom: 150rpx;
		.title{
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 5rpx;
		}
		textarea{
			border: 1rpx dashed #666;
			border-radius: 10rpx;
			font-size: 25rpx;
			height: 400rpx;
			padding: 10rpx;
			margin: 20rpx;
		}
		.btn{
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			button{
				font-size: 28rpx;
				width: 200rpx;
			}
		}
	}
	.exam {
		padding: 30upx 30upx 0;

		&-types {
			font-size: 30upx;
			color: #333;
			display: flex;

			text:nth-child(1) {
				width: 120upx;
				height: 40upx;
				font-size: 30upx;
				color: #fff;
				background-color: #5ca3f8;
				font-weight: 700;
				border-radius: 20upx 20upx 0 20upx;
				text-align: center;
				line-height: 40upx;
				margin-right: 20upx;
			}
		}

		&-context {
			margin-top: 10upx;

			text {
				font-size: 30upx;
				color: #333;
			}
		}

		&-radio {
			display: flex;
			flex-direction: column;

			label {
				margin-top: 30upx;

				text {
					margin-left: 10upx;
					font-size: 32upx;
					color: #333;
				}
			}
		}
	}


	.floor {
		width: 750upx;
		height: 120upx;
		background-color: #4b89ff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		&-top {
			display: flex;
			justify-content: space-around;

			&-left {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 50upx;
					height: 50upx;
				}

				text {
					font-size: 30upx;
					color: #333;
					margin-left: 10upx;
				}
			}

			&-center {
				font-size: 30upx;
				color: #ff5454;
			}

			&-right {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 50upx;
					height:50upx;
				}

				text {
					font-size: 30upx;
					color: #333;
					margin-left: 10upx;
				}
			}
		}

		&-bottom {
			display: flex;
			justify-content: space-around;
			margin-top: 10upx;
			color: #fff;
			font-weight: 700;
		}
	}


	.submit {
		position: absolute;
		top: 600px;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 50%;
		background: #e5e3ef;
		color: white;
	}

	.bgActive {
		background: #00a8ff;
	}

	.timer {
		position: absolute;
		top: 500px;
		transform: translate(-50%, -50%);
		width: 40%;
		left: 50%;
		text-align: center;

		.time {
			margin-top: 30upx;
			color: #ffa900;
			left: 50%;
			text-align: center;
			line-height: 45px;
			font-size: 30px;
			border: 2px solid;
		}
	}

	.checkboxItem {
		margin-top: 30upx;
		display: block;
	}

	.beall {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		background: white;
		position: absolute;
		bottom: 60px;
		left: 0;
		z-index: 99;
		padding: 15px;
		background: #5ca3f8;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		color: white;

		.item {
			width: 100%;
			height: 25px;
			margin-bottom: 10px;
			font-size: 14px;
			line-height: 25px;
			/* border: 1px solid #fff; */
			-webkit-border-radius: 10px;
			border-radius: 6px;
			padding: 0 10px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			color: #333;
			background: white;
		}

		// .item:hover{
		// 	background-color: red;
		// 	color: white;
		// }
	}

	.mask {

		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
	}

	.analysis {
		margin: 50upx 20upx;
		border-top: 1px solid #eee;

		.right {
			margin: 45upx 0;

			.correct {
				margin: 0 15upx;
				color: #2e9ffd;
			}
		}
		.right >view{
			display: flex;
		}
		.details {
			// height: 500upx;
			background-color: #f1f1f1;
			margin-bottom: 20upx;

			.tt {
				margin: 20upx 0;
				height: 60upx;
				line-height: 60upx;
				background-color: #31a5e9;
				padding-left: 10upx;

				text {
					font-size: 30upx;
					font-weight: 700;
					color: white;
				}
			}

			.con {
				max-width: 100%;
				font-size: 28upx;
				line-height: 50upx;
				word-wrap: break-word;
			}
		}
	}
</style>
